<template>
  <view class="mask" v-if="showEditTourist"></view>
  <view class="bottom-popup-container" :class="{ show: showEditTourist }">
    <view class="popup-content">
      <!-- Header -->
      <view class="header">
        <wd-icon name="arrow-left" size="22px" @click="closeEdit(false)"></wd-icon>
        <text class="title">信息编辑</text>
        <text></text>
      </view>

      <!-- edit Tourist info -->
      <view class="form-container">
        <!-- ID Type -->
        <view class="form-item">
          <text class="label">证件类型</text>
          <picker
              class="input"
              mode="selector"
              :range="idList"
              :value="idType - 1"
              range-key="idLabel"
              @change="bindPickerChange"
          >
            <text>{{ transferIdCardType(idType) || '请选择' }}</text>
          </picker>
          <text class="arrow">›</text>
        </view>

        <!-- Name -->
        <view class="form-item">
          <text class="label">姓名</text>
          <input class="input" v-model="formData.name" placeholder="请输入姓名"/>
        </view>

        <!-- ID Number -->
        <view class="form-item">
          <text class="label">证件号码</text>
          <input class="input" v-model="formData.idCard" placeholder="请输入证件号码"/>
          <text class="camera-btn" @click="scanIDCard">拍照识别</text>
        </view>

        <!-- Contact -->
        <view class="form-item">
          <text class="label">手机号码</text>
          <input class="input" v-model="formData.tel" placeholder="请输入手机号码"/>
        </view>
      </view>
      <!-- Footer Notice -->
      <view class="notice">
        <text>您已知晓您填写的上述信息将被用于预订实名制的产品，请确保信息真实有效。仅在有具体交易时授权提供给第三方
        </text>
      </view>
	<view class="add-tourist" @click="saveInfo">
		<text>保存</text>
	</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import {defineComponent, reactive, ref} from 'vue';
  import {addTourist, updateTourist} from "@/api/common"; 
  import {useMixin} from "@/hook/useMixin"

  interface PickerChoose {
    detail: {
      value: string
    }
  }

  const {transferIdCardType} = useMixin()

  const props = defineProps({
    showEditTourist: {
      type: Boolean,
      default: false //默认不显示
    },
    isAdd: {
      type: Boolean,
      default: true
    },
    touristObj: {
      type: Object,
      default: {}
    }
  });

  watch(props,(value) => {
    if(value.touristObj) {
      for (const key in value.touristObj) {
        if(key === "name" || key === "idCard" || key === "tel" || key === "id") {
          formData[key] = value.touristObj[key];
        }
        if(key === "idType") {
          idType.value = value.touristObj[key];
        }
      }
    }
  },{deep:true});


  const emit = defineEmits(['close']);
  const idType = ref(1);
  const idList = ref([
    {idLabel: "身份证", idType: 1},
    {idLabel: "永居证", idType: 2},
    {idLabel: "台胞证", idType: 3},
    {idLabel: "护照", idType: 4},
    {idLabel: "港澳通行证", idType: 5},
  ]);

  interface FormData {
    name: string;
    idCard: string;
    tel: string;
    id:number | string
  }

  const formData = reactive<FormData>({
    name: '',
    idCard: '',
    tel: '',
    id: ''
  });


  // 隐藏弹出层
  const closeEdit = (status: Boolean) => {
    emit('close', {status});
  };

  const bindPickerChange = (e: PickerChoose) => {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    let {idType: _idType} = idList.value[e.detail.value];
    idType.value = _idType;
    console.log(idType,'idType')
  };
  const scanIDCard = () => {
    uni.chooseImage({
      count: 1,
      success: () => {
        uni.showToast({
          title: '已拍照，请手动输入',
          icon: 'none'
        });
        // 实际项目中这里调用OCR识别接口
      },
      fail: (err) => {
        console.error('拍照失败:', err);
      }
    });
  };

  const validateForm = (): boolean => {
    if (!formData.name.trim()) {
      uni.showToast({title: '请输入姓名', icon: 'none'});
      return false;
    }
    if (!formData.idCard.trim()) {
      uni.showToast({title: '请输入证件号码', icon: 'none'});
      return false;
    }
    if (!formData.tel.trim()) {
      uni.showToast({title: '请输入手机号码', icon: 'none'});
      return false;
    }
    return true;
  };

  const saveInfo = async () => {
    if (!validateForm()) return;
    if (props.isAdd) {
      // 新增游客信息
      await addTourist({
        userId: 2,
        name: formData.name,
        tel: formData.tel,
        idCard: formData.idCard + "",
        idType: idType.value,
      }).then(res => {
        console.log(res, 'res');
        setTimeout(() => {
          uni.showToast({title: '保存成功', icon: 'success'});
          closeEdit(true);
        }, 1000);
      });
    } else {
      // 修改游客信息
      await updateTourist({
        userId: 2,
        name: formData.name,
        tel: formData.tel,
        idCard: formData.idCard + "",
        idType: idType.value,
        id: formData.id
      }).then(res => {
        console.log(res, 'res');
        setTimeout(() => {
          uni.showToast({title: '修改成功', icon: 'success'});
          closeEdit(true);
        }, 1000);
      });
    }

    for (const key in formData) {
      formData[key] = "";
    }
    idType.value = 1;
  };

</script>

<style scoped>
/* 遮罩层 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 9998;
}

/* 弹出层容器 */
.bottom-popup-container {
  height: 1007rpx;
  background: linear-gradient(to bottom, #CFDDD4 0%, #FFFFFF 20%);
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  position: fixed;
  bottom: -100%; /* 初始位置在屏幕外 */
  left: 0;
  right: 0;
  /* box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.1); */
  transform: translateY(100%); /* 初始状态向上偏移 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* 动画效果 */
  opacity: 0; /* 初始透明度 */
  z-index: 9999;
}

/* 显示时的状态 */
.bottom-popup-container.show {
  bottom: 0; /* 显示时的位置 */
  transform: translateY(0); /* 平移到正常位置 */
  opacity: 1; /* 完全不透明 */
}

/* 关闭时的状态 */
.bottom-popup-container.hide {
  bottom: -100%; /* 向下移动至屏幕外 */
  transform: translateY(-100%); /* 向上偏移 */
  opacity: 0; /* 完全透明 */
}


.add-tourist {
  position: absolute;
  bottom: 10%; /* 初始位置在屏幕外 */
  color: #fff;
  text-align: center;
  width: 80%;
  margin: 0 5%;
  height: 69rpx;
  line-height: 69rpx;
  background: #1B9C61;
  border-radius: 10rpx;
}
.popup-content {
  padding: 0 5%;
}

.header {
  border-bottom: 1rpx solid #E4E5DE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  margin-bottom: 30rpx;
}


.title {
  text-align: center;
  width: 70%;
  height: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 29rpx;
  color: #2B2B24;
  line-height: 35rpx;
}

.save-btn {
  text-align: center;
  width: 106rpx;
  /* padding: 3rpx 20rpx; */
  height: 42rpx;
  border-radius: 7rpx;
  border: 1px solid #508963;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 22rpx;
  color: #2B2B24;
  line-height: 42rpx;
}

.form-container {
  padding: 0 30rpx 50rpx 30rpx;
}

.form-item {
  display: flex;
  align-items: center;
  height: 100rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  width: 180rpx;
  font-size: 30rpx;
  color: #333;
}

.input {
  flex: 1;
  text-align: right;
  font-size: 30rpx;
  line-height: 30rpx;
  padding-right: 20rpx;
}

.arrow {
  color: #999;
  font-size: 40rpx;
  transform: rotate(90deg);
}

.camera-btn {
  color: #007AFF;
  font-size: 26rpx;
  padding: 8rpx 16rpx;
  border: 1rpx solid #007AFF;
  border-radius: 30rpx;
}

.notice {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #777777;
  line-height: 35rpx;
}
</style>


